<template>
  <div class="author-box">
    <!-- 作者信息 -->
    <div class="author-container">
      <!-- 作者头像 -->
      <img class="author-avatar" :src="user?.avatar" />
      <!-- 作者名称 -->
      <p class="author-name">
        {{ user?.username }} <el-icon style="position: relative; top: 3px"><Male /></el-icon> {{ user?.age }}岁
      </p>
      <!-- 个人简介 -->
      <p class="site-desc">
        {{ user?.desc }}
      </p>
      <!-- 签名 -->
      <div class="site-desc">GOOD LUCK FOR YOU</div>
    </div>
    <!-- 社交 -->
    <social-list></social-list>
  </div>
</template>

<script setup>
import { useUsersStore } from '@/store/user';
import { storeToRefs } from 'pinia';
import SocialList from './SocialList.vue';
const { user } = storeToRefs(useUsersStore());
</script>

<style scoped>
.author-box {
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 0 10px var(--box-bg-shadow);
  transition: all 0.2s ease-in-out 0s;
}
</style>
